import Chart, { defaultProgressConfig } from '@/components/chart';

import { px } from '@/utils';

import styles from './index.module.scss';

export type ProgressProps = {
  value: number;
  title?: string;
  bottomValue?: number;
  barWidth?: number;
  showPercent?: boolean;
  className?: string;
};

const Progress: React.FC<ProgressProps> = ({
  value: propsValue,
  barWidth: propsBarWidth = px(10),
  showPercent: propsShowPercent = true,
  className
}) => {
  return (
    <Chart
      className={styles['chart']}
      option={defaultProgressConfig({
        title: {
          show: propsShowPercent,
          text: `{value|${propsValue}}{unit|%}`
        },
        polar: {
          radius: '140%'
        },
        series: [
          {
            data: [propsValue],
            barWidth: propsBarWidth
          }
        ]
      })}
    />
  );
};

export default Progress;
